<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="/static/layui/css/layui.css" rel="stylesheet">

    <link href="/static/css/left.css" rel="stylesheet">

    <style>
        body{
            background-color: #fafafa;
        }

        .right_content{
            width: 900px;
            background-color: #ffff;
            padding: 3%;
            min-height: 600px;
        }
        .right_content div{
            padding: 1% 0px;
        }
        .title_content span{
            font-size: 20px;
            font-weight: 600;
        }
        .layui-btn.layui-bg-blue{
            background-color: #276040 !important;
        }
        .layui-table thead tr th{
            border-left: solid 1px #ffffff !important;
            border-top: solid 1px #ffffff !important;
            border-right: solid 1px #ffffff !important;
            background-color: #fafafa;
            padding: 0px 25px !important;
            height: 50px ;
        }
        .layui-table tbody tr td{
            border-left: solid 1px #ffffff !important;
            border-right: solid 1px #ffffff !important;
            border-: solid 1px #ffffff !important;
            padding: 0px 25px !important;
            height: 50px;
            color: #a9a9a9 !important;
        }

        tbody tr td button{
            border-color: #276040 !important;;
            color: #276040 !important;
            border-radius: 5px !important;

        }
        /*.layui-col-md4 .layui-input-wrap input:first-child{
            border-right: none !important;
        }
        .layui-col-md4 .layui-input-wrap input:last-child{
            border-left: none !important;
        }*/

        .layui-col-md4 .layui-input-wrap input[type="text"]:focus{
            border: 1px solid #276040 !important;
        }

        .prefix_d{
            padding: 0px 20px 0px 0px !important;
        }
        .group_{
            display: flex;
            align-items: center ;
        }

        .group_ input:hover{
            border: 1px solid #276040 !important;
        }

        .type_content{
            display: flex;align-items: center
        }
        .cur2 {
            background-color: #e8efe5 !important;
            color: #276040 !important;
        }
        .cur3{
            background-color: #f2f2f2 !important;
        }

        .type_content button{
            /**/
            font-weight: bold !important;
            border-radius: 5px !important;
        }

        .type_content button:hover {
            border: 1px solid #276040 !important;
        }
        .query_content .layui-btn{
            margin-left: 20px;
            background-color: #276040 !important;
        }
        .layui-col-md4{
            width: 160px !important;
            border-radius: 5px !important;
        }
        .th_d{
            display: flex;
            align-items: center !important;
        }
        .th_d div{
            line-height: 1px;
            margin-right: 15px;
        }

        .layui-form-checked[lay-skin=primary]>i {
            border-color: #276040 !important;
            background-color: #276040 !important;
        }
        .layui-icon.layui-icon-ok:hover{
            border: 1px solid #276040 !important;
        }


        .new_{
            display: none;
        }

    </style>

</head>
<body>

   <div th:replace="/navigation_bar/top :: headerFragment"></div>
    <div class="content" style="max-width: 1220px; display: flex;margin: 0 auto;padding: 2% 0;justify-content: space-between;">

        <div th:replace="/navigation_bar/left :: left_layout"></div>
        <div class="right_content">
            <div class="title_content"><span>产品管理</span></div>
            <div class="type_content">
                <button class="layui-btn layui-btn-primary layui-border cur2 old_b" >历史产品</button>
                <button class="layui-btn layui-btn-primary layui-border cur3 new_b" >新产品</button>
            </div>

            <div class="query_content">
                <div class="group_">
                    <div class="prefix_d new_">
                        供应商
                    </div>

                    <div class="layui-col-md4 new_" style="margin-right: 20px">
                        <div class="layui-input-wrap">
                            <input type="text" placeholder="请输入供应商名称" class="layui-input">
                        </div>
                    </div>

                    <div class="prefix_d">
                        上市时间
                    </div>
                    <div class="layui-col-md4" >
                        <div class="layui-input-wrap">
                            <input type="text" placeholder="开始日期" class="layui-input" style="border-right: none">
                            <div class="layui-input-suffix">
                                -
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4" >
                        <div class="layui-input-wrap">
                            <input type="text" placeholder="结束日期" class="layui-input" style="border-left: none">
                        </div>
                    </div>
                    <button type="button" class="layui-btn old_" >全部删除</button>

                    <button type="button" class="layui-btn new_" style="display: none">全部删除</button>
                </div>
            </div>
            <div class="table_content">
                <table class="layui-table"><colgroup>
                        <col width="350">

                        <col width="100">
                    </colgroup>
                    <thead>
                        <tr>
                            <th class="th_d">
                                <div class="layui-form">
                                    <input type="checkbox" name="product_id" lay-skin="primary" value="0">商品信息
                                    <!--<input type="checkbox">-->
                                </div>
                            </th>

                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery-2.2.2.min.js"></script>
<script src="/static/js/left.js"></script>
<script>

    $(function (){
        $('.old_b').click(function (){
            $('.new_').hide();
            $('.old_').show();
            $('.layui-border').removeClass('cur2');
            $(this).removeClass('cur3');
            $(this).addClass('cur2');
        })
        $('.new_b').click(function (){
            $('.new_').show();
            $('.old_').hide();
            $('.layui-border').removeClass('cur2');
            $(this).removeClass('cur3');
            $(this).addClass('cur2');
        })
    })




   /* $.ajax({
        url: '/user/all',// 上传地址
        type: 'POST',
        data: {param: ""},
        cache: false,//不启用缓存
        dataType: "json",//返回json格式的数据
        success: function (data) {
            //$('#tbody').children().remove()
            set_table_data(data.data);
        }
    })*/
    function set_table_data(data){

        let html = "";
        for (k in data){
            let item = data[k]
            html += `
                        <tr>
                            <td>
                                <div class="layui-form">
                                    <input type="checkbox" name="product_id" lay-skin="primary">`+item.productName+`
                                    <!--<input type="checkbox">-->
                                </div>
                            </td>

                            <td>
                                <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="del('`+item.id+`', this)">删除</button>
                            </td>
                        </tr>
            `
        }
        $('#tbody').append(html)
    }

    function del(id,e){

        /*$.ajax({
            url: '/user/delete',// 上传地址
            type: 'POST',
            data: {id: id},
            cache: false,//不启用缓存
            dataType: "json",//返回json格式的数据
            success: function (data) {
                if (data.success){
                    $(e).parent().parent().remove();
                }

            }
        })*/
    }



</script>
</body>
</html>